<template>
  <div class="user-info" :class="{ hide: isHide }">
    <ul class="info">
      <li class="item">
        <span class="active-count count">0</span>
        <span class="active">动态</span>
      </li>
      <li class="item">
        <span class="focus-count count">4</span>
        <span class="foucs">关注</span>
      </li>
      <li class="item">
        <span class="fans-count count">0</span>
        <span class="fans">粉丝</span>
      </li>
    </ul>
    <a-button type="primary" style="width: 100%" @click="logout"
      >退出登录</a-button
    >
  </div>
</template>

<script>
export default {
  name: "AlerUserInfo",
  props: ["isHide", "userInfo"],
  methods: {
    // 退出登录
    logout() {
      localStorage.removeItem("isLogin");
      this.$store.commit("changeState", false);
      this.$emit("changeUserInfo", {
        avatarUrl:
          "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2258616609,4181715650&fm=26&gp=0.jpg",
        nickName: "未登录",
      });
      this.$bus.$emit('cancelUserList');
    },
  },
};
</script>

<style lang="scss" scoped>
.user-info {
  position: absolute;
  z-index: 30;
  top: 7rem;
  right: 22rem;
  width: 24rem;
  height: 13rem;
  padding: 0 1rem 1rem;
  background: #fff;
  .info {
    display: flex;
    align-items: center;
    padding: 1rem;
    height: 6rem;
    .item {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 8rem;
      height: 100%;
      .count {
        font-size: 1.8rem;
        font-weight: bold;
      }
    }
  }
}
.user-info.hide {
  display: none;
}
</style>